<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>账号管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="./layui/css/layui.css">
	<script type="text/javascript" src="./layui/layui.js" charset="UTF-8"></script>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
  	<table class="layui-hide" id="test" lay-filter="test"></table>    
  	<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-sm" lay-event="insertUser">添加用户</button>
		</div>
	</script>
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="delete">删除</a>
	</script>
	<script>
		layui.use(['table','layer'], function(){
			
		  	var $ = layui.jquery
		  	,table = layui.table
		  	,layer = layui.layer;
		  	
		  	//动态表格，获取数据库数据
		  	var tableIns = table.render({
				elem: '#test'
				,id: 'test'
				,url: 'GetUser.do'
				,toolbar:  '#toolbarDemo'
				,defaultToolbar: ['filter', 'exports', 'print']
				,title: '用户列表'
				,page:true
				,limit:4
				,limits:[2,3,4,5,6]
				,cols: [[
					{type:'numbers',width:80}
			  		,{field:'userID', title:'用户ID'}
			  		,{field:'username', title:'用户名'}
			  		,{field:'userrole', title:'用户角色'}
			        ,{fixed: 'right', width: 150, align:'center', toolbar: '#barDemo'}
					]],
				parseData:function(res) {
					var result;
	                if (this.page.curr)
	                	result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
	                else
	                    result = res.data.slice(0, this.limit);
	               	return {
	               		"code": res.code, //解析接口状态
	               		"msg": res.msg, //解析提示文本
	               		"count": res.count, //解析数据长度
	               		"data": result //解析数据列表
	               		};
	               	}
			});
		  	
		  	//搜索，数据表格重加载
			$('#searchBtn').on('click',function(){
		  		var demoReload = $("#demoReload").val();
		  		
		  		tableIns.reload({
		  			method:'POST'
		  			,url: 'GetUserByName.do'
		  			,where: {
		  				'username':demoReload
		  			}
		  			,done: function(res,curr,count) {
		  				this.where={};
		  			}
		  		})
		  	});
			
		  	
		  	table.on('toolbar(test)', function(obj){
		   	 	var checkStatus = table.checkStatus(obj.config.id);
		    	switch(obj.event){
		    	case 'insertUser':
		        	layer.open({
		            	type: 2 
		            	,title: '添加用户'
		            	,area: ['400px', '400px']
		            	,content:['add_user.jsp']
		            	,maxmin: true
		            	,btn: ['关闭']
		        		,yes: function(){
		    				layer.closeAll();
		        		}
		        		,end:function(){
		        			location.reload();
		        		}
		          	});     
		        	break;
		    	}
			});
			//删除
			table.on('tool(test)', function(obj){
				var data = obj.data;
				if(obj.event === 'delete'){
					layer.confirm('确定删除？', function(index){
						obj.del();
						$.ajax({
							url:'deleteUser.do'
							,data:{
								userID:data.userID
							}
						});
						layer.msg("删除成功");
						layer.close(index);
					});
				} 
			});
	})
	</script>

</body>
</html>